<template>
  <!-- 数据库管理页面 -->
  <a-form layout="inline">
    <a-form-item>
      应用状态:
      <a-select size="small" class="selectthr" label-in-value style="width: 120px" :options="options" @change="handleChange"></a-select>
    </a-form-item>
    <a-form-item>
      数据库名称:
      <a-input v-model:value="appshu" class="inputtit" />
    </a-form-item>
    <a-form-item>
      <a-button class="btnxixi" @click="returnxixi">重置</a-button>
    </a-form-item>
    <a-form-item>
      <a-button class="btnhaha" type="primary" @click="selectdatabase">查询</a-button>
    </a-form-item>
    <a-form-item>
      <a-button class="addbtn" type="primary" @click="addmanange">新增数据源</a-button>
    </a-form-item>
  </a-form>
  <!-- table表格 -->
  <div>
    <a-table class="asitems" bordered :data-source="dataSource" :columns="columns" :pagination="pagination">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'modifyTime'">{{ record.modifyTime }}</template>
        <template v-if="column.dataIndex === 'baseStatus'">
          <a-tag :color="Colors[record.baseStatus]">{{ Status[record.baseStatus] }}</a-tag>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a v-if="dataSource.length" class="aitems" @click="connected(record.baseId)">连通测试</a>
          <a v-if="record.baseStatus == '1' || record.baseStatus == '3'" class="aitems" @click="release(record.baseId)">发布</a>
          <a v-if="record.baseStatus == '1' || record.baseStatus == '3'" class="aitems" @click="showModal(record.baseId)">编辑</a>
          <a v-if="record.baseStatus == '2'" class="aitems" @click="Deactivate(record.baseId)">停用</a>
          <a-popconfirm v-if="record.baseStatus == '1'" class="aitems" cancel-text="否" ok-text="是" title="是否删除？" @confirm="onDelete(record.baseId)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
    <!-- 弹窗 -->
    <Manalert :statealert="Statealert" :visible="visible" :database="database" @sendflse="sendflse" />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Manalert from './manalert.vue';
  import http from '@/api/axiosconfig';
  import { selectDataBase, updateDaseStatus, tombstone, selectBaseId, selectByDataBase } from '@/api/apihook/api';
  import { any, number } from 'vue-types';
  import { message } from 'ant-design-vue';
  import { Status, Colors } from '../enumType/enum';
  const columns = [
    {
      title: '数据源名称',
      dataIndex: 'baseName',
      width: '8%',
    },
    {
      title: '数据库类型',
      dataIndex: 'baseType',
      width: '8%',
    },
    {
      title: '数据源描述',
      dataIndex: 'baseMsg',
      width: '15%',
    },
    {
      title: '连接信息',
      dataIndex: 'baseUrls',
      width: '15%',
    },
    {
      title: '应用状态',
      dataIndex: 'baseStatus',
      width: '8%',
    },
    {
      title: '更新时间',
      dataIndex: 'modifyTime',
      width: '10%',
      sorter: (a: any, b: any) => {
        return a > b ? 1 : -1;
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '15%',
    },
  ];
  // table初始数据
  let dataSource = ref();
  // 发布状态
  const appstate = ref('');
  // 输入框内容
  const appshu = ref('');
  const options = ref<any>([
    {
      value: '1',
      label: '未发布',
    },
    {
      value: '2',
      label: '已发布',
    },
    {
      value: '3',
      label: '已停用',
    },
  ]);
  const handleChange = (xixi: any) => {
    appstate.value = xixi.key;
  };
  // 删除
  const onDelete = async (baseId: string) => {
    await tombstone({ baseId: Number(baseId) });
    dataSource.value = dataSource.value.filter((item: any) => item.baseId !== baseId);
    message.success('删除成功');
  };
  // 停用
  const Deactivate = async (xixi: string) => {
    await updateDaseStatus({ baseId: Number(xixi), baseStatus: '3' });
    dataSource.value.forEach((e: any) => {
      if (e.baseId == xixi) {
        e.baseStatus = '3';
        message.success('停用成功');
        selecteall();
      }
    });
  };
  // 发布
  const release = async (xixi: string) => {
    await updateDaseStatus({ baseId: Number(xixi), baseStatus: '2' });
    dataSource.value.forEach((e: any) => {
      if (e.baseId == xixi) {
        e.baseStatus = '2';
        message.success('发布成功');
      }
    });
  };
  // 连通测试
  const connected = (xixi: string) => {
    dataSource.value.foreach(e => {
      if (e.baseId == xixi) {
        alert('连通成功');
      }
    });
  };
  // 编辑数据库数据
  let database = ref({
    baseName: '',
    baseType: 'Mysql',
    baseUrls: '',
    baseDriver: '',
    baseMsg: '',
    baseUser: '',
    basePsw: '',
  });
  let visible = ref<boolean>(false);
  let Statealert = ref<string>('新增');
  let sendflse = (xixi: boolean) => {
    visible.value = xixi;
  };
  // 新增
  const addmanange = () => {
    visible.value = true;
    Statealert.value = '新增';
    Object.keys(database.value).forEach(key => {
      database.value[key] = '';
    });
  };
  // 编辑
  const showModal = async (xixi: string) => {
    let res = await selectBaseId({ baseId: Number(xixi) });
    database.value = res.data.data;
    visible.value = true;
    Statealert.value = '编辑';
  };
  // 初始查询
  onMounted(() => {
    selecteall();
  });
  // 重置
  const returnxixi = () => {
    selecteall();
    message.success('重置成功');
  };
  // 全部查询
  const selecteall = async () => {
    let res = await selectDataBase({});
    dataSource.value = res.data.data.records;
  };
  // 分页开始
  let pagination = {
    defaultPageSize: 5,
    showTotal: (total: number) => `共 ${total} 条`,
    showSizeChanger: true,
    showQuickJumper: true,
    position: ['bottomCenter'],
    pageSizeOptions: ['5', '10', '15', '20'],
    onShowSizeChange: (current: number, pageSize: number) => pageSize,
  };
  // 条件查询
  const selectdatabase = async () => {
    let res = await selectByDataBase({ baseStatus: Number(appstate.value), baseName: appshu.value });
    dataSource.value = res.data.data.records;
    message.success('查询成功');
  };
</script>

<style lang="less" scoped>
  .asitems > template > template {
    display: flex;
  }

  .aitems {
    margin-left: 10px;
  }

  .ant-tooltip-inner {
    display: none;
    visibility: hidden;
  }

  .musttext::before {
    margin-right: 8px;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    color: #ff4d4f;
    content: '*';
    transform: translateY(0px);
  }

  .bodyxi {
    margin-left: 20%;
    padding-top: 25px;
    width: 100%;
    height: 80px;
    background: white;
  }

  .header {
    display: flex;
    justify-content: space-between;
    margin-left: 1%;
    width: 98%;
  }

  .addbtn {
    // top: -10px;
    left: 600px;
    border: none !important;
    border-radius: 5px;
    width: 100px;
    height: 24px;
    color: white !important;
    /* background: rgba(22, 155, 213, 1) !important; */
    line-height: 20px;
  }

  .selectthr {
    width: 96px !important;
    height: 24px !important;
  }

  .inputtit {
    width: 96px;
    height: 24px !important;
  }

  .bodycenter {
    display: flex;
    margin-bottom: 40px;
    margin-left: 31%;
    width: 38%;
  }

  .bodycenter > * {
    margin-left: 10px;
    line-height: 24px;
    height: 18px !important;
  }

  .btnxixi {
    height: 24px;
    line-height: 16px;
  }

  .btnhaha {
    height: 24px;
    line-height: 16px;
    /* background: rgba(22, 155, 213, 1) !important; */
  }

  .imglogo {
    margin-right: 1px;
    width: 20px;
    height: 20px;
  }

  .inpitem {
    width: 300px;
    height: 24px;
  }

  .items {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-right: 50px;
  }

  .ant-table-pagination.ant-pagination {
    display: noen;
    margin: 16px 0;
    visibility: hidden !important;
  }

  /deep/ .ant-table {
    min-height: 71vh;
  }
</style>
